{extend name="public/base" /}
{block name="style"}
    <style>
        /* 列表项容器 */
        .message-item {
            padding: 14px 15px;
            background-color: #fff;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            align-items: center;
        }

        /* 未读状态区分 */
        .message-item.unread {
            background-color: #f9fafc; /* 未读消息浅背景 */
        }

        /* 未读红点 */
        .unread-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ff5252; /* 醒目红点 */
            margin-right: 12px;
            flex-shrink: 0;
        }
        .message-item:not(.unread) .unread-dot {
            visibility: hidden; /* 已读消息隐藏红点 */
        }

        /* 内容区域：标题+时间+状态 */
        .message-content {
            flex: 1; /* 占满剩余空间 */
            min-width: 0; /* 允许标题超出时省略 */
        }

        /* 标题样式 */
        .message-title {
            font-size: 16px;
            color: #333;
            margin: 0 0 6px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* 标题过长省略 */
        }
        .message-item.unread .message-title {
            font-weight: 500; /* 未读标题加粗 */
        }
        .message-item:not(.unread) .message-title {
            color: #666; /* 已读标题颜色变浅 */
        }

        /* 时间和状态容器 */
        .message-info {
            display: flex;
            justify-content: space-between; /* 时间居左，状态居右 */
            align-items: center;
        }

        /* 时间样式 */
        .message-time {
            font-size: 12px;
            color: #999;
        }

        /* 已读/未读状态标签 */
        .message-status {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 12px;
        }
        .message-status:not(.read) { /* 未读状态 */
            color: #ff5252;
            background-color: rgba(255, 82, 82, 0.1); /* 红色浅色背景 */
        }
        .message-status.read { /* 已读状态 */
            color: #666;
            background-color: #f0f0f0; /* 灰色背景 */
        }

        /* 右侧箭头 */
        .message-arrow {
            color: #ddd;
            font-size: 18px;
            margin-left: 10px;
            flex-shrink: 0;
        }
        .message-item.unread .message-arrow {
            color: #999; /* 未读消息箭头稍深 */
        }

        /* 点击反馈 */
        .message-link:active .message-item {
            background-color: #f5f5f5;
        }

        /* 加载更多样式 */
        .load-more {
            text-align: center;
            padding: 15px;
            color: #999;
            font-size: 14px;
        }
        .load-more i {
            margin-right: 5px;
        }
    </style>
{/block}
{block name="content"}
<!-- 头部导航 - 带返回按钮 -->
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">站内信列表</h1>
</div>
<div class='weui-content'>
    <!-- 公告列表 -->
    <div class="message-list" style="height:90vh; overflow:auto;">
        <!-- 消息项将通过JS动态加载 -->
    </div>

    <!-- 加载更多 -->
    <div class="load-more">
        加载更多
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(function() {
        var page = 1;
        var loading = false;  // 加载状态锁（防止并发请求）
        var scrollTimer = null; // 滚动防抖计时器
        var requestId = 0; // 请求唯一标识（处理过期请求）

        // 初始加载第一页
        load(page);

        // 滚动加载更多（防抖+节流优化）
        $(".message-list").infinite().on("infinite", function() {
            if (loading) return; // 正在加载中，直接拦截

            // 防抖：500ms内多次滚动只触发一次加载
            clearTimeout(scrollTimer);
            scrollTimer = setTimeout(function() {
                if (loading) return; // 二次检查，防止并发

                loading = true; // 上锁
                page++;
                $('.load-more').show(); // 提前显示加载状态，优化体验
                load(page);
            }, 500); // 缩短延迟，平衡响应速度和性能
        });

        // 加载数据（增强状态管理和容错）
        function load(page) {
            var currentId = ++requestId; // 生成当前请求唯一标识

            post("/letter-list.html", {
                page: page,
                limit: 14
            }, function(res) {
                // 忽略过期请求（已被新请求替代）
                if (currentId !== requestId) return;

                // 重置加载状态
                loading = false;
                $('.load-more').hide();

                if (res !== "") {
                    $(".message-list").append(res);
                } else {
                    // 无更多数据时锁定加载，避免无效请求
                    loading = true;
                    // 移除已有提示，避免重复添加
                    $(".message-list").find(".weui-cells__title").remove();
                    $(".message-list").append("<div class=\"weui-cells__title\"><p class='center-div'>已无更多数据</p></div>");
                    page--; // 回退页码，防止后续加载异常
                }
            }, function() {
                // 错误回调（假设post方法已改造支持错误处理）
                if (currentId !== requestId) return;

                loading = false;
                $('.load-more').hide();
                page--; // 失败时回退页码
            });
        }
    });
</script>
{/block}
